import React from 'react';
//目标是实现一个根据关键字进行搜索的一个功能
import { useState, useEffect, useMemo } from 'react';
import axios from 'axios'

// useMemo 语法:
// const 新值 = useMemo(()=>{return 值就是新增},[依赖的变量,...])
// 只有当依赖的变量发生变化的时候, 才去执行参数1 的函数,并返回一个新值

const Base = () => {
    // 定义关键字
    const [keyword, setkeyword] = useState('');
    // 定义学校数组
    const [collegeArr, setCollegeFn] = useState([]);
    // 定义count 
    const [count, setCount] = useState(0)
    useEffect(() => {
        // 发起数据请求
        axios.get('https://api.i-lynn.cn/college?page=1').then(res => {
            // console.log(res);
            setCollegeFn(res.data.data.list1)
        })
    }, [])
    // 当函数组件中定义的数据响应数据变化时,函数组件中的代码重新执行一遍
    // 现在问题 在函数组件中,任意一个响应数据发生变化, 函数组件都会再次执行一遍, 
    // 这样当count 变量变化的时候, 我希望 filter 函数不执行, 也就是只有关键字keywords 改变的时候执行.

    // const newCollegeArr = collegeArr.filter(item => {
    //     console.log('filter');
    //     // 语法:const newArr=  arr.filter(item=> 条件) 条件为真, 当前的item 留在newArr 中,否则不留
    //     return item.school_name.includes(keyword)
    // })

    // 使用useMemo 改造如上函数
    // useMemo 语法:
    // const 新值 = useMemo(()=>{return 值就是新增},[依赖的变量,...])
    // 只有当依赖的变量发生变化的时候, 才去执行参数1 的函数,并返回一个新值
    // 初始化第一次 collegeArr赋值了,所以filter 函数执行, 得到最初的newCollegeArr
    // 当keyword发生改变的时候, filter函数再次执行,当count 改变的时候,就不再执行,newCollegeArr 使用的是
    // 上一次缓存的newCollegeArr,
    // useMemo钩子函数特别想计算属性,起到了优化性能的作用
    const newCollegeArr = useMemo(() => {
        return collegeArr.filter(item => {
            console.log('filter');
            return item.school_name.includes(keyword)
        })
    }, [keyword, collegeArr])


    // console.log(newCollegeArr);
    return (
        <div>
            <p onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>
            <p>
                <input type='text' value={keyword} onChange={(e) => {
                    setkeyword(e.target.value)
                }} />
            </p>
            {/* 遍历学校 */}
            <ul>
                {
                    newCollegeArr.map((item) => {
                        return <li key={item.id}>{item.school_name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Base;
